<template>
  <div class="coupon">
    <el-container>
      <sidebar :currentMenu="currentMenu"></sidebar>
      <el-container>
        <el-header>
          <headbar></headbar>
        </el-header>
        <el-main>
          <coupon-search @searchCoupon="searchCoupon"></coupon-search>
          <div class="coupon__list-container">
            <div class="coupon__list-container__title">
              <span>优惠券一览</span>
              <el-button type="primary" class="coupon__list-container__title__button" @click="createNewCoupon">新建</el-button>
            </div>
            <div class="coupon__list-container__page-size">
              每页表示<el-input value="10" class="coupon__list-container__page-size__input"></el-input>件
            </div>
            <div class="coupon__list-container__list">
              <el-table
                :data="tableData"
                border
                 class="coupon__list-container__list__table">
                <el-table-column

                  prop="ID"
                  label="优惠券ID"
                  width="80">
                </el-table-column>
                <el-table-column
                  prop="number"
                  label="企划编号"
                  width="80">
                </el-table-column>
                <el-table-column
                  prop="couponName"
                  label="优惠券名称"
                  width="100">
                </el-table-column>
                <el-table-column
                  prop="couponType"
                  label="优惠券类型"
                  width="100">
                </el-table-column>
                <el-table-column
                  prop="activityType"
                  label="活动类型"
                  width="80">
                </el-table-column>
                <el-table-column
                  prop="activityName"
                  label="活动名称"
                  width="103">
                </el-table-column>
                <el-table-column
                  prop="availableTime"
                  label="可用时间"
                  width="100">
                </el-table-column>
                <el-table-column
                  prop="visibleTime"
                  label="可见时间"
                  width="100">
                </el-table-column>
                <el-table-column
                  prop="createTime"
                  label="创建时间"
                  width="100">
                </el-table-column>
                <el-table-column
                  prop="status"
                  label="状态"
                  width="66">
                </el-table-column>
                <el-table-column
                  prop="result"
                  label="结果"
                  width="50">
                  <el-button type="text" size="small">查看</el-button>
                </el-table-column>
                <el-table-column
                  prop="copy"
                  label="复制"
                  width="50">
                  <el-button type="text" size="small">复制</el-button>
                </el-table-column>
                <el-table-column
                  label="操作">
                  <template slot-scope="scope">
                    <el-button @click="gotoCouponDetail(scope.row)" type="text" size="small">详细</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <div class="coupon__list-container__pages">
              <el-pagination
                background
                :page-size="2"
                layout="prev, pager, next"
                :total="3">
              </el-pagination>
            </div>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import Sidebar      from '@/components/Sidebar';
import Headbar      from '@/components/Headbar';
import CouponSearch from './CouponList/CouponSearch';

import api from '@/api'

export default {
  data () {
    return {
      tableData: [
        {
          ID: '590430',
          number: 11111,
          couponName: '江浙沪满20减10',
          couponType: '代金券',
          activityType: '注册派发',
          activityName: '上海市普陀区金沙江路 1518 弄',
          availableTime: '2019/03/11 00:00 ~ 2019/06/22 23:59',
          visibleTime: '2019/03/11 00:00',
          createTime: '2019/03/07 12:00',
          status: '已发布'
        },
        {
          ID: '590433',
          number: 22222,
          couponName: '江浙沪满20减10',
          couponType: '兑换券',
          activityType: '系统派发',
          activityName: '江浙沪豆浆促销活动',
          availableTime: '2019/03/11 00:00 ~ 2019/06/22 23:59',
          visibleTime: '2019/03/11 00:00',
          createTime: '2019/03/07 12:00',
          status: '已发布'
        },
        {
          ID: '790433',
          number: 33333,
          couponName: '江浙沪满20减10',
          couponType: '折扣券',
          activityType: '新店礼券',
          activityName: '上海宁夏路店新店折扣活动',
          availableTime: '2019/03/11 00:00 ~ 2019/06/22 23:59',
          visibleTime: '2019/03/11 00:00',
          createTime: '2019/03/07 12:00',
          status: '未发布'
        }
      ],
      currentMenu: '',
      coupons: null
    }
  },
  components: {
    Sidebar,
    Headbar,
    CouponSearch
  },
  methods: {
    createNewCoupon() {
      console.log('submit!');
    },
    searchCoupon(formData) {
      const timestamp1 = formData.date1.getTime();
      const filteredTableData = this.tableData;
      this.tableData = filteredTableData;
    },
    gotoCouponDetail(couponDetail) {
      console.log(couponDetail);
    }
  },
  created () {
    const param1 = '';
    const param2 = '';
    api.coupon.fetchCoupons({ param1, param2 }).then(coupons => {
      this.coupons = coupons;
    })
    .catch(err => {
      alert('Error!');
    })
  }
}
</script>
<style lang="scss" scoped>
.coupon {
  &__list-container {
    background-color: #ffffff;

    &__title {
      padding: 20px 30px;
      font-size: 20px;
      border-bottom: 1px #dddddd solid;

      &__button {
        float: right;
        padding: 7px 15px;
      }
    }

    &__list {
      padding: 0 20px;

      &__table {
        text-align: center;
      }
    }

    &__page-size {
      padding: 20px;

      &__input {
        display: inline-block;
        width: 100px;
        margin: 0 10px;
      }
    }

    &__pages {
      padding: 20px 20px 30px 20px;
      text-align: right;
    }
  }
}

.line {
  text-align: center;
}
</style>
